import React from "react";
import {
    inject,
    observer
} from "mobx-react";
import { Tools, TextareaItem, Button, Icon } from "weaver-mobile";
import { withRouter } from "react-router-dom";
import { Browser } from "weaver-mobile-page";
import { toJS } from "mobx";
import "../../style/sendBless.less";
const getLabel = Tools.getLabel;

@inject('hrmSendBless')
@withRouter
@observer
export default class SendBless extends React.Component {
    componentDidMount() {
        const { hrmSendBless: { getBlessingForm, setPropsData }, history, personDatas, targetId, createDate,recordId } = this.props;
        setPropsData({ birthTargets: personDatas, targetId, createDate,history,recordId });
        getBlessingForm();
    }

    render() {
        const {
            hrmSendBless: {
                greetingCardShow,
                handleImgClick,
                canPrev,
                canNext,
                prev,
                next,
                handleTagGroupChange,
                tagGroupDatas,
                browserConditionParam,
                blessOptions,
                addBlessTarget,
                dovalidate,
                checkAll,
                sendBless,
                handleTextareaChange,
                defaultBless,
                browserStore,
                blessing,
            }
        } = this.props;

        return (
            <div className="hrmBless">
                <div className="blessContent">
                    <div>
                        <p>{`${getLabel(528857,"选择贺卡背景")}: `}</p>
                        <Icon type="left" size="lg" className={!canPrev ? " disabled" : ""} onClick={() => canPrev && prev()}/>
                        <div>
                            {greetingCardShow.map(data => <img src={data.url} style={{width: (window.innerWidth - 120) / 2}} onClick={() => handleImgClick(data.url)} className={data.isChecked ? "img-checked" : ""}  alt="" />)}
                        </div>
                        <Icon type="right" size="lg" className={!canNext ? " disabled" : ""} onClick={() => canNext && next()}/>
                    </div> 
                    <div>
                        <Browser   
                            {...browserConditionParam} 
                            valueArray={toJS(tagGroupDatas)}
                            type="birthdayResource" 
                            label={`${getLabel(528858,"送祝福给")}: `} 
                            store={browserStore}
                            onChange={(value, valueSpan, valueArray) => handleTagGroupChange(value, valueSpan, valueArray)}
                        />
                        { (blessOptions.length > 0) && (
                            <p className="blessOptions">
                                { blessOptions.slice(0, 3).map(option => <span onClick={() => addBlessTarget(option)}>{option.name}</span>) }
                                <span className="suffix">{getLabel(528859,"{placeholder}等{number}人也是今天过生日").replace(/\{(placeholder|holder)\}/,'').replace("{number}",blessOptions.length)}</span>
                                <span onClick={checkAll}>{getLabel(528860,"全选")}</span>
                            </p>
                        ) }
                    </div>
                    <div className="blessInput">
                        <p>{`${getLabel(528861,"祝福语")}: `}</p>
                        <TextareaItem 
                            value={blessing}
                            data-seed="logId"
                            rows={4}
                            onChange={handleTextareaChange}
                        />
                    </div>
                </div>
                <Button type="primary" onClick={sendBless}>{getLabel(528862,"发送")}</Button>
            </div>
        );
    }
}